<template>
    <div class="bookstore">
        <!-- 搜索框与性别-->
        <div class="search-sex">
            <!-- 性别 -->
            <div class="sex" @click="toggle">
                <!-- <van-icon name="cross" /> -->
                <meta name="referrer" content="never" />
                <img v-if="isMale" src="../assets/images/store_gender_male.png" class="img-auto" />
                <img v-else src="../assets/images/store_gender_female.png" class="img-auto" />
            </div>
            <!-- 搜索框 -->
            <div class="search" @click="goSearch">
                <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" />
            </div>
        </div>
        <!-- 上部分分类 -->
        <van-tabs sticky v-model="active" line-width="14" animated title-active-color="green" title-inactive-color="#686969">
            <!-- <van-tab :title="item.name" v-for = "(item,index) in SortMsg" :key="index">{{item.content}}</van-tab> -->
            <van-tab title="精选"><Choiceness></Choiceness></van-tab>
            <van-tab title="免费"><Free></Free></van-tab>
            <van-tab title="男生"><Boys></Boys></van-tab>
            <van-tab title="女生"><Girls></Girls></van-tab>
            <van-tab title="出版"><Publish></Publish></van-tab>
            <van-tab title="听书"><Voice></Voice></van-tab>
        </van-tabs>
    </div>
</template>

<script>
import Choiceness from "../views/ChoicenessView.vue";
import Free from "../views/FreeView.vue";
import Boys from "../views/BoysView.vue";
import Girls from "../views/GirlsView.vue";
import Publish from "../views/PublishView.vue";
import Voice from "../views/VoiceView.vue";
export default {
    name: "Bookstore",
    data() {
        return {
            value: "",
            active: 0,
            SortMsg: [],
            // ChoicenessData:[],
            // FreeData:[],
            // BoysData:[],
            // GirlsData:[],
            // PublishData:[],
            // VoiceData:[]
            isMale: true,
        };
    },
    created() {
        // this.getSortMsg();
    },
    methods: {
        toggle() {
            this.isMale = !this.isMale;
        },
        goSearch() {
            this.$router.push({ name: "Search" });
        },

        // 获取分类信息
        getSortMsg() {
            this.axios({
                methods: "get",
                url: "store/navi.json",
            })
                .then((res) => {
                    res.data.data.navi.forEach((item) => {
                        // 切割得到type
                        item.type = item.url.split("?")[1].split("&")[0].split("=")[1];
                    });
                    this.SortMsg.push(...res.data.data.navi);
                    // (this.SortMsg);
                    // this.getTypeIdStort(this.SortMsg[0].type,this.SortMsg[0].id)
                    // this.getTypeIdStort(this.SortMsg[1].type,this.SortMsg[1].id)
                    // this.getTypeIdStort(this.SortMsg[2].type,this.SortMsg[2].id)
                    // this.getTypeIdStort(this.SortMsg[3].type,this.SortMsg[3].id)
                    // this.getTypeIdStort(this.SortMsg[4].type,this.SortMsg[4].id)
                    // this.getTypeIdStort(this.SortMsg[5].type,this.SortMsg[5].id)
                })
                .catch((err) => {
                    err;
                });
        },

        // 根据type和id获取分类信息
        // getTypeIdStort(type,id){
        //     this.axios({
        //         methods:'get',
        //         url:'https://apis.netstart.cn/yunyuedu/store/show.json',
        //         params:{
        //             type,
        //             uuid:id
        //         }
        //     }).then(res=>{
        //        if(type==='recommend'){
        //         this.ChoicenessData.push(...res.data.data.list)
        //        }else if(type==='free'){
        //         this.FreeData.push(...res.data.data.list)
        //         (this.FreeData);
        //        }else if(type==='male'){
        //         this.BoysData.push(...res.data.data.list)
        //        }else if(type==='femail'){
        //         this.GirlsData.push(...res.data.data.list)
        //        }else if(type==='publish'){
        //         this.PublishData.push(...res.data.data.list)
        //        }else{
        //         this.VoiceData.push(...res.data.data.list)
        //        }
        //     }).catch(err=>{
        //         (err);
        //     })
        // }
    },
    components: {
        Choiceness,
        Free,
        Boys,
        Girls,
        Publish,
        Voice,
    },
};
</script>

<style lang="less" scoped>
.bookstore {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: calc(100% - 50px);
    background-color: #f7f8f8;
    .search-sex {
        width: 100%;
        height: 50px;
        display: flex;
        background-color: #fff;
        .sex {
            width: 18px;
            height: 18px;
            line-height: 1.33333rem;
            border-radius: 50%;
            margin: 17px 0 0 15px;
        }
        .search {
            width: calc(100% - 50px);
        }
    }
}
</style>
